/*
 * @Author: OBKoro1
 * @Date: 2022-08-22 15:58:45
 * @LastEditors: OBKoro1
 * @LastEditTime: 2024-09-24 18:33:40
 * @FilePath: \onemode-swj\src\utils\cesiumFunction.ts
 * @Description:
 *
 * Copyright (c) 2022 by 用户/公司名, All Rights Reserved.
 */
import { ref, onMounted, reactive, toRefs, provide, onUnmounted } from "vue";
import * as Cesium from "cesium";
import * as echarts from "echarts";
import moment from "moment";
import { ElMessage } from "element-plus";

import ss from "@/assets/mapIcon/ss.png";
import sk from "@/assets/mapIcon/sk.png";
import ssyc from "@/assets/mapIcon/ssyc.png";
import circle from "@/assets/circle.png";

import drainageBasin from "@/assets/js/长江流域坐标.json";

import {
  getPlanList,
  getAloneLine,
  getStSedCoordinate,
  getRiverData,
  getSchemeData,
  getAreaContrast,
  searchPlanResultmap,
  searchPlanResultmapData,
  readResultFile,
  dmSearch,
  getSandPeakDate,
  selectMsxsrsEnd,
  getSectionSix,
  getXscdSedAccumulate,
  getSedAccumulate,
  getPsDiaoDuList,
} from "@/request/api";

import { useStore } from "vuex";

export default function cesiumFunction() {
  const store = useStore();
  let viewer; // cesium对象

  // 地图服务地址
  //const geoserverUrl = "http://10.6.13.222:5010//geoserver/DiTu/wms/";
  const geoserverUrl = "http://10.6.88.2:8686//geoserver/DiTu/wms/";
  //const geoserverUrl = "https://10.68.180.138:443/geoserver/DiTu/wms/";

  let LayerDuanmianL; // 断面线

  // 地图图层管理
  let cesiumLayer = {
    // 成果图层新旧替换
    planResultGeoJson: {
      oldLayer: {},
      newLayer: {},
    },
  };

  // Entity的id统一管理
  let entitysManage = {
    PointDrawConut: 0,
  };

  // 底图控制
  const baseMapManage = [
    {
      name: "天地图影像",
      layerName: "DT_tdt",
      show: false,
      format: "tiles",
      subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
      url: "http://{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8bc7fb9d9772502b00d51b504bbab73b",
    },
    {
      name: "电子地图",
      layerName: "DT_dz",
      show: false,
      imageryProvider: {},
      format: "image/png",
      url: "http://10.6.1.54:9998/arcgis/rest/services/reservoir/basemap/MapServer/tile/{TileMatrix}/{TileRow}/{TileCol}?layer=m_dem30m&style=default&tilematrixset=GoogleMapsCompatible_m_dem30m&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}",
      //url: "https://10.68.180.138/arcgis54/rest/services/reservoir/basemap/MapServer/tile/{TileMatrix}/{TileRow}/{TileCol}?layer=m_dem30m&style=default&tilematrixset=GoogleMapsCompatible_m_dem30m&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}",
    },
    {
      name: "水利部地形",
      layerName: "DT_slb",
      show: false,
      imageryProvider: {},
      format: "image/png",
      url: "https://gatewayproxy-jcpt.mwr.cn/mdem30m/wmts100?k=U2lWYNEdoOSRUf+wPqcR7w%3D%3D&layer=m_dem30m&style=default&tilematrixset=GoogleMapsCompatible_m_dem30m&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={TileMatrix}&TileCol={TileCol}&TileRow={TileRow}",
    },
  ];

  const state = reactive({
    // 站点流量含沙量弹窗是否展示
    siteProcessLineDialog: false,
    // 站点流量含沙量弹窗数据
    siteProcessLineInfoData: {
      id: "", // 所选站点id
      name: "", // 所选站点名称
      siteType: "", // 所选站点类型
      timeRange: [
        moment().subtract(15, "days").format("YYYY-MM-DD 00:00:00"),
        moment().add(3, "days").format("YYYY-MM-DD 00:00:00"),
      ], // 时间选择
      tableData: [], // 表格数据
      tableColumnData: [], // 表格表头数据
    },
    entitiesCard: true,
    // 图例显示切换
    entitiesShowType: {
      ZQ: true,
      RR: false,
      ZZ: true,
    },
    // 成果展示参数
    resultParam: {
      showType: "",
      planType: "",

      selectPlan: [], // 所选方案ID
      selectPlanData: {
        planName: "",
        startTime: "",
        stateTime: "",
      }, // 所选方案数据
      selectPlanResultType: "s", // 成果类型
      palnSelectDisabled: false, // 是否禁用方案选择按钮
      resultTypeDisabled: false, // 是否禁用成果类型选择框
      planTable: [], // 所有方案成果
      colorCard: [], // 色卡
      interval: undefined, // 定时器管理

      silderIndex: [0], // 成果时间进度条选中项
      silderLength: 0, // 成果时间进度数组长度
      silderDataObj: {}, // 成果时间进度条数据

      silderRange: [0], // 范围数组
      silderRangeLength: 0, // 范围数组长度
      silderRangeDataObj: {}, // 范围数组数据对象

      startTime: "", // 开始时间
      endTime: "", // 结束时间
      playType: "play", // 播放状态
      sandPushTooltipData: [], // 表格浮窗数据
      sandPushMainSiteTimeData: [], // 沙峰推进主要站点抵达时间

      sliderDuanIndex: [], // 成果断面拖动条选中项
      sliderDuanArr: [], // 成果断面保存数组
      sliderDuanMax: 0, // 成果断面最大值
      sliderDuanMin: 0, // 成果断面最小值
      sliderDuanData: {}, // 成果断面拖动条数据

      linkageStatus: false, // 联动状态
      startXscd: null, // 开始断面
      endXscd: null, // 结束断面
    },
    // 多库输沙量对比表格
    sedimentLoadTable: [],
    // 侧边栏状态管理
    asideManage: {
      showType: "forecast",
      planType: "",
      // 预测侧边栏
      forecastManage: {
        show: true,
        manageArr: {
          寸滩站: {
            show: true,
          },
          三峡未来预测沙量: {
            show: true,
          },
          坝下游冲淤量预测: {
            show: true,
          },
          多库对比: {
            show: true,
          },
        },
      },
      // 成果侧边栏
      resultManage: {
        show: false,
        manageArr: {
          方案信息: {
            show: true,
          },
          冲淤量: {
            show: true,
          },
          冲淤量累积过程: {
            show: true,
          },
        },
      },
      // 成果方案对比
      planContrast: {
        show: false,
      },
    },
    // 断面弹窗数据
    sectionDialog: {
      show: false,
      name: "",
      sixDataArr: [],
      close: () => {
        const elem = document.getElementById("section-charts");

        const myChart = echarts.init(elem);

        myChart.clear();
        state.waterSlider.sliderShow = false;
      },
    },
    // 断面弹窗水位数据
    waterSlider: {
      watervalue: 0, // 当前水位
      max: 0, // 最大水位
      min: 0, // 最小水位
      numberOfSegments: 7, // 分段个数
      waterInfo: {
        wt: [],
      },
      sliderShow: false,
    },

    // 累积冲淤量数据
    sedimentSum: {
      tableData: [],
    },

    // 图表获取时间展示
    chartsTimeShow: {
      siteTimeShow: "", // 站点
      forecastTimeShow: "", // 预测
    },
  });

  const selectBaseMap = ref("");

  let multipleSelection = ref([]);

  provide("multipleSelection", multipleSelection);

  onMounted(() => {
    console.log("onmounted");

    leftEchartsInit();
    cesiumMapInit();
  });

  onUnmounted(() => {
    console.log("onUnmounted");
    clearEntity();
  });
  /**
   * @description: 地图初始化
   * @return {*}
   */
  async function cesiumMapInit() {
    Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNmM3YzE4Yi1kZGM2LTQxMWItYjI2Yi04MDdmNjg2ZmM3N2EiLCJpZCI6MTMxNjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjI3MjQwODh9.bufgGS1SgfpSaQqpoz-5FULUgUoseZ5FUIUq3J-Idgg";

    // 生成地图
    viewer = new Cesium.Viewer("map121321312", {
      animation: false, // 是否显示动画控件(左下方那个)
      homeButton: false,
      fullscreenButton: false, // 是否显示全屏按钮
      baseLayerPicker: false, // 是否显示图层选择控件
      geocoder: false, // 是否显示地名查找控件
      timeline: false, // 是否显示时间线控件
      sceneModePicker: false, // 是否显示投影方式控件
      navigationHelpButton: false, // 是否显示帮助信息控件
      infoBox: false, // 是否显示点击要素之后显示的信息
      selectionIndicator: false, // 是否启用地图选择
    });

    // 左下角cesium版权图标隐藏
    viewer.cesiumWidget.creditContainer.style.display = "none";

    // 设置地图缩放最大/最小值
    viewer.scene.screenSpaceCameraController.minimumZoomDistance = 5000;
    viewer.scene.screenSpaceCameraController.maximumZoomDistance = 2500000;

    //设置加载设
    //viewer.scene.backgroundColor = Cesium.Color.LIGHTBLUE;
    //设置底色为白色
    viewer.scene.globe.baseColor = Cesium.Color.WHITE;

    // 设置地图中心点
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(106.992255, 29.51055, 1500000),
      // destination: Cesium.Cartesian3.fromDegrees(108.28, 29.8, 725000),
    });

    viewer.imageryLayers.removeAll(true);

    // cesium底图控制
    baseMapManage.forEach(
      (item: {
        name: string;
        layerName: string;
        show: boolean;
        imageryProvider: {};
        url: string;
        format: string;
        subdomains?: [];
        riverImageryProviderURL?: string;
        riverImageryProvider?: {};
      }) => {
        const baseMapImageryProvider =
          new Cesium.WebMapTileServiceImageryProvider({
            url: item.url,
            layer: item.layerName,
            style: "default",
            format: item.format,
            tileMatrixSetID: "GoogleMapsCompatible",
            subdomains: item.subdomains,
          });

        item.imageryProvider = viewer.imageryLayers.addImageryProvider(
          baseMapImageryProvider
        );

        if (item.name === "电子地图") {
          const riverImageryProvider =
            new Cesium.WebMapTileServiceImageryProvider({
              url: "http://10.6.1.54:9998/arcgis/rest/services/reservoir/demPNG/MapServer/tile/{TileMatrix}/{TileRow}/{TileCol}?layer=m_sx_v&style=default&tilematrixset=GoogleMapsCompatible_m_sx_v&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={TileMatrix}&TileCol={TileCol}&TileRow={TileRow}",
              //url: "https://10.68.180.138/arcgis54/rest/services/reservoir/demPNG/MapServer/tile/{TileMatrix}/{TileRow}/{TileCol}?layer=m_sx_v&style=default&tilematrixset=GoogleMapsCompatible_m_sx_v&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={TileMatrix}&TileCol={TileCol}&TileRow={TileRow}",
              layer: "DT_dz_river", // 图层名称，如：'tasmania'
              style: "default",
              format: "image/png",
              tileMatrixSetID: "GoogleMapsCompatible",
            });

          item.riverImageryProvider =
            viewer.imageryLayers.addImageryProvider(riverImageryProvider);
        } else if (item.name === "水利部地形") {
          const riverImageryProvider =
            new Cesium.WebMapTileServiceImageryProvider({
              url: "https://gatewayproxy-jcpt.mwr.cn/m_sx/wmts100?k=U2lWYNEdoOSRUf+wPqcR7w%3D%3D&layer=m_sx&style=default&tilematrixset=GoogleMapsCompatible_m_sx&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={TileMatrix}&TileCol={TileCol}&TileRow={TileRow}",
              layer: "DT_dz_river", // 图层名称，如：'tasmania'
              style: "default",
              format: "image/png",
              tileMatrixSetID: "GoogleMapsCompatible",
            });

          item.riverImageryProvider =
            viewer.imageryLayers.addImageryProvider(riverImageryProvider);
        } else if (item.name === "天地图影像") {
          const riverImageryProvider =
            new Cesium.WebMapTileServiceImageryProvider({
              url: "http://10.6.1.54:9998/arcgis/rest/services/reservoir/demPNG/MapServer/tile/{TileMatrix}/{TileRow}/{TileCol}",
              //url: "https://10.68.180.138/arcgis54/rest/services/reservoir/demPNG/MapServer/tile/{TileMatrix}/{TileRow}/{TileCol}",
              layer: "DT_dz_river", // 图层名称，如：'tasmania'
              style: "default",
              format: "image/png",
              tileMatrixSetID: "GoogleMapsCompatible",
            });

          item.riverImageryProvider =
            viewer.imageryLayers.addImageryProvider(riverImageryProvider);
        }
      }
    );

    await getSiteCoordinate();

    await loadDuanMianL();

    await test();

    changeBaseMap("DT_dz");

    // 监听地图左键点击事件
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    handler.setInputAction(function (movement) {
      // Entities事件
      const pick = viewer.scene.pick(movement.position);

      // ImageryProvider事件
      const ray = viewer.camera.getPickRay(movement.position);
      const cartesian = viewer.scene.globe.pick(ray, viewer.scene);

      if (Cesium.defined(pick)) {
        // 实时站/水库站点击事件
        if (
          pick.id.siteType === "ZQ" ||
          pick.id.siteType === "RR" ||
          pick.id.siteType === "ZZ"
        ) {
          // 根据定义的站点对象从cesium的entities中取出所需值
          Object.keys(state.siteProcessLineInfoData).forEach((item) => {
            if (pick.id[item])
              state.siteProcessLineInfoData[item] = pick.id[item];
          });

          state.siteProcessLineDialog = true;

          setTimeout(() => {
            siteDialogEchartsInit();
          }, 0);
        }
      } else if (cartesian) {
        // 断面线点击事件

        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);

        if (cartographic) {
          const xy = new Cesium.Cartesian2();
          const alti = viewer.camera.positionCartographic.height;
          const level = getLevel(alti);
          const positionXY = LayerDuanmianL.tilingScheme.positionToTileXY(
            cartographic,
            level,
            xy
          );
          var promise = LayerDuanmianL.pickFeatures(
            positionXY.x,
            positionXY.y,
            level,
            cartographic.longitude,
            cartographic.latitude
          );

          promise.then((data) => {
            if (data && data.length > 0) {
              if (data[0].properties.XSCD) {
                state.sectionDialog.show = true;
                state.sectionDialog.name = data[0].properties["名称"];
                /**
                 * @description: 获取断面数据
                 * @return {*}
                 */
                selectMsxsrsEnd({
                  xsnm: state.sectionDialog.name,
                  // planno: null,
                  // area: null,
                  // msno: null,
                  // // dateTime: moment(selectPlanData.datastarttime).format(
                  // //   "YYYY-MM-DD HH:mm:ss"
                  // // ),
                  // dateTime: null
                }).then((res: any) => {
                  state.waterSlider.max = res.maxY;
                  state.waterSlider.min = res.minY;
                  state.waterSlider.watervalue = res.wt[0][1];
                  state.waterSlider.sliderShow = true;

                  state.waterSlider.waterInfo = res;
                  const elem = document.getElementById("section-charts");

                  myChartWater = echarts.init(elem);

                  myChartWater.clear();

                  let option = echartsOption(res);

                  myChartWater.setOption(option);

                  setTimeout(() => {
                    myChartWater.resize();
                  }, 100);

                  /**
                   * @description: 获取六要素
                   * @return {*}
                   */
                  getSectionSix({
                    // area: selectPlanData.address,
                    // msno: selectPlanData.msno,
                    // area: null,
                    // msno: null,
                    xsnm: state.sectionDialog.name,
                    wt: res.wt[0][1],
                  }).then((res: any) => {
                    // res.msno = selectPlanData.msno;
                    res.msno = "默认";
                    state.sectionDialog.sixDataArr = [];
                    state.sectionDialog.sixDataArr.push(res);
                  });
                });
              }
            } else {
              return false;
            }
          });
        }
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }

  function changeBaseMap(baseMapName: String) {
    baseMapManage.forEach(
      (item: {
        name: string;
        layerName: string;
        show: boolean;
        imageryProvider: {};
        url: string;
        riverImageryProvider?: {};
      }) => {
        const showType = item.layerName != baseMapName ? false : true;

        item.show = showType;

        const index = viewer.imageryLayers.indexOf(item.imageryProvider);
        viewer.imageryLayers.get(index).show = showType;

        if (item.riverImageryProvider) {
          const riverIndex = viewer.imageryLayers.indexOf(
            item.riverImageryProvider
          );

          viewer.imageryLayers.get(riverIndex).show = showType;
        }
      }
    );
  }

  async function test() {
    let res = await Cesium.GeoJsonDataSource.load(drainageBasin, {
      stroke: Cesium.Color.YELLOW,
      fill: Cesium.Color.BLUE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
      strokeWidth: 2.5,
    });

    console.log(res);

    viewer.dataSources.add(res);

    let features = drainageBasin.features;
    let positionArray = [];

    // 获取区域的经纬度坐标
    for (let i = 0; i < features[0].geometry.coordinates[0].length; i++) {
      let coor = features[0].geometry.coordinates[0][i];
      positionArray.push(coor[0]);
      positionArray.push(coor[1]);
    }

    // 遮罩
    let polygonEntity = new Cesium.Entity({
      polygon: {
        hierarchy: {
          // 添加外部区域为1/4半圆，设置为180会报错
          positions: Cesium.Cartesian3.fromDegreesArray([
            0, 0, 0, 90, 179, 90, 179, 0,
          ]),
          // 中心挖空的“洞”
          holes: [
            {
              positions: Cesium.Cartesian3.fromDegreesArray(positionArray),
              holes: [],
            },
          ],
        },
        material: new Cesium.Color(255 / 255.0, 255 / 255.0, 255 / 255.0, 0.7),
      },
    });

    viewer.entities.add(polygonEntity);
  }

  /**
   * @description: 沙峰推进
   * @param {*} timeList 时间数组
   * @return {*}
   */
  function sandPeakPush(timeList) {
    getSandPeakDate({
      planno: state.resultParam.selectPlan[0],
      dates: timeList.join(","),
      tm: "5",
    }).then((res: any) => {
      // resultData中的list是推进轨迹 data则是图表中的悬浮窗数据 xsnmList是沙峰推进主要站点抵达时间
      const resultData = res.data;

      state.resultParam.sandPushTooltipData = resultData.data;

      state.resultParam.sandPushMainSiteTimeData = resultData.xsnmList.map(
        (item) => {
          item.sdf = moment(item.sdf).format("MM-DD HH:mm");

          return item;
        }
      );
      console.log(state);

      //加轨迹线
      viewer.entities.add({
        id: "historyLine",
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArray(
            resultData.list.map((item) => [item.x, item.y]).flat(1)
          ),
          width: 1,
          material: Cesium.Color.fromCssColorString("#FF0000"),
          clampToGround: true,
        },
      });

      //模型沿着轨迹移动（图标移动过的路径变色）
      var start = Cesium.JulianDate.fromDate(new Date(resultData.list[0].time)); //获取第一个点的时间

      var end = Cesium.JulianDate.fromDate(
        new Date(resultData.list[resultData.list.length - 1].time)
      ); //获取结束时间

      viewer.clock.startTime = start; // 将多个点的第一个点设为轨迹播放的开始时间
      viewer.clock.currentTime = start; // 修改时间轴的当前时间
      viewer.clock.stopTime = end; // 修改停止时间
      viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 修改到达结束时间后的播放状态

      // 生成点集合
      var property = new Cesium.SampledPositionProperty();
      resultData.list.forEach((item) => {
        property.addSample(
          Cesium.JulianDate.fromDate(new Date(item.time)),
          Cesium.Cartesian3.fromDegrees(item.x, item.y, item.z)
        );
      });

      // 点移动轨迹
      viewer.entities.add({
        id: "historyPoint",
        position: property, // 点集
        billboard: {
          image: circle,
          scale: 0.5,
          pixelOffset: new Cesium.Cartesian2(0, 0),
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        }, //billboard方式 和model二选一
        // 根据所提供的速度计算模型的朝向
        orientation: new Cesium.VelocityOrientationProperty(property),
        path: {
          leadTime: 0,
          resolution: 1,
          material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.1,
            color: Cesium.Color.GREEN,
          }),
          width: 10,
        },
      });
    });
  }

  /**
   * @description: 在地图上生成站点标记
   * @return {*}
   */
  function getSiteCoordinate() {
    getStSedCoordinate({
      startDate: moment().subtract(7, "days").format("YYYY-MM-DD 00:00:00"),
      endDate: moment().add(3, "days").format("YYYY-MM-DD 23:59:59"),
    }).then((res: any) => {
      if (res.code === 200) {
        // 循环生成站点图标
        res.data.forEach((item) => {
          let image;
          switch (item.sttp) {
            case "ZQ":
              image = ss;
              break;
            case "RR":
              image = sk;
              break;
            case "ZZ":
              // image = ssyc;
              image =
                "";
              break;
          }

          imgEntitiesAdd(
            item.stcd,
            item.stnm,
            item.sttp,
            [item.lgtd, item.lttd],
            image,
            [18, 18]
          );
        });

        // 初始化只加载实时站点
        viewer.entities.values.forEach((item) => {
          item.show = state.entitiesShowType[item.siteType];
        });
      }
    });
  }
  let layerDuan;
  /**
   * @description: 在地图上生成断面线
   * @return {*}
   */
  function loadDuanMianL() {
    LayerDuanmianL = new Cesium.WebMapServiceImageryProvider({
      url: geoserverUrl,
      //layers: "DiTu:DuanmianL", // 蓝色断面线
      layers: "DiTu:HddmxDuanmianL", // 黄色断面线
      parameters: {
        transparent: true, // 是否透明
        tiled: false,
        format: "image/png",
        srs: "EPSG:4326",
        styles: "",
      },
    });

    layerDuan = viewer.imageryLayers.addImageryProvider(LayerDuanmianL);
  }

  /**
   * @description: 在地图上新增图片类型的entities
   * @param {*} id
   * @param {*} name
   * @param {*} siteType 站点类型
   * @param {*} positionArr 位置坐标(lon,lat)
   * @param {*} image entities图片
   * @param {*} imageSize 图片大小
   * @return {*}
   */
  function imgEntitiesAdd(id, name, siteType, positionArr, image, imageSize) {
    viewer.entities.add({
      id,
      name,
      siteType,
      position: Cesium.Cartesian3.fromDegrees(
        positionArr[0],
        positionArr[1],
        0
      ),
      billboard: {
        // 图像地址，URI或Canvas的属性
        image,
        // 高度（以像素为单位）
        height: imageSize[0],
        // 宽度（以像素为单位）
        width: imageSize[1],
        // 逆时针旋转
        rotation: 0,
        // 大小是否以米为单位
        sizeInMeters: false,
        // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
        pixelOffset: new Cesium.Cartesian2(0, 0),
        // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
        scale: 1.0,
        // 是否显示
        show: true,
      },
      label: {
        text: name,
        font: "14px Source Han Sans CN", // 字体样式
        fillColor: Cesium.Color.fromCssColorString("#000"), // 字体颜色
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, // label样式
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 100,
        pixelOffset: new Cesium.Cartesian2(0, 15), // 偏移
      },
    });
  }

  /**
   * @description: 根据坐标绘制点
   * @param {*} lon
   * @param {*} lat
   * @return {*}
   */
  function drawPoint(lon, lat) {
    var pointGeometry = viewer.entities.add({
      id: "PointDraw",
      name: "点几何对象",
      position: Cesium.Cartesian3.fromDegrees(lon, lat, 0),
      point: {
        color: Cesium.Color.RED,
        pixelSize: 15,
        outlineColor: Cesium.Color.YELLOW,
        outlineWidth: 5,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
      },
    });
    return pointGeometry;
  }

  /**
   * @description: 获取地图层级
   * @param {*} height 当前相机高度
   * @return {*}
   */
  function getLevel(height) {
    switch (height) {
      case height > 48000000:
        return 0;
      case height > 24000000:
        return 1;
      case height > 12000000:
        return 2;
      case height > 6000000:
        return 3;
      case height > 3000000:
        return 4;
      case height > 1500000:
        return 5;
      case height > 750000:
        return 6;
      case height > 375000:
        return 7;
      case height > 187500:
        return 8;
      case height > 93750:
        return 9;
      case height > 46875:
        return 10;
      case height > 23437.5:
        return 11;
      case height > 11718.75:
        return 12;
      case height > 5859.38:
        return 13;
      case height > 2929.69:
        return 14;
      case height > 1464.84:
        return 15;
      case height > 732.42:
        return 16;
      case height > 366.21:
        return 17;
      default:
        return 18;
    }
  }

  /**
   * @description: 清除所有Entity
   * @param {*} clearId 需要清除的id类型
   * @return {*}
   */
  function clearEntity(clearId = "") {
    if (clearId == "") {
      viewer.entities.removeAll();
    } else {
      viewer.entities.values.forEach((item) => {
        if (item.id.includes(clearId)) viewer.entities.removeById(item.id);
      });
    }
  }

  // ——————————————上为cesium方法封装——————————————————

  /**
   * @description: 加载左侧侧边栏图表数据
   * @return {*}
   */
  function leftEchartsInit() {
    // 三峡水库图表加载
    reservoirEchartsInit(60106980, "oneEcharts", [
      "入库流量",
      "出库流量",
      "预测含沙量",
    ]);

    // 寸滩站图表加载
    realSiteEchartsInit(60105400, "towEcharts", [
      "流量",
      "含沙量",
      "预测含沙量",
    ]);

    // 坝下游冲淤量预测
    getCjCyResultData();

    // 成果展示
    getPlanTable();

    window.addEventListener("resize", () => {
      const oneEcharts = document.getElementById("oneEcharts");
      const oneChart = echarts.init(oneEcharts);

      const twoEcharts = document.getElementById("towEcharts");
      const twoChart = echarts.init(twoEcharts);

      const threeEcharts = document.getElementById("threeEcharts");
      const threeChart = echarts.init(threeEcharts);

      setTimeout(() => {
        oneChart && oneChart.resize();
        twoChart && twoChart.resize();
        threeEcharts && threeChart.resize();
      }, 100);
    });

    // 多库对比
    getAreaContrast({
      startDate: moment().subtract(7, "days").format("YYYY-MM-DD 00:00:00"),
      endDate: moment().add(3, "days").format("YYYY-MM-DD 23:59:59"),
    }).then((res: any) => {
      if (res.code === 200) {
        state.sedimentLoadTable = res.data;
      }
    });
  }

  /**
   * @description: 获取左侧侧边栏坝下游冲淤量预测
   * @return {*}
   */
  function getCjCyResultData() {
    // 获取成果数据
    readResultFile({
      type: "cy",
      timeFlag: false,
      section: false,
      planNo: "默认方案",
      allData: true,
      startDate: moment().subtract(7, "days").format("YYYY-MM-DD 00:00:00"),
      endDate: moment().add(3, "days").format("YYYY-MM-DD 23:59:59"),
    }).then((res: any) => {
      const elem = document.getElementById("threeEcharts");

      elem.removeAttribute("_echarts_instance_");

      const myChart = echarts.init(elem);

      myChart.clear();

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: 10,
          right: 10,
          bottom: 20,
          left: 5,
          containLabel: true,
        },
        xAxis: {
          type: "value",
          inverse: true,
          position: "top",
          splitLine: { show: true },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
            inside: true,
          },
        },
        yAxis: {
          type: "category",
          inverse: true,
          data: res.data[res.data.length - 1].siteOutQList.map(
            (item) => item.siteName
          ),
          axisTick: {
            show: true,
            inside: true,
          },
        },
        series: [
          {
            type: "bar",
            data: res.data[res.data.length - 1].siteOutQList.map(
              (item) => item.t
            ),
          },
        ],
      };

      myChart.setOption(option);
    });
  }

  /**
   * @description: 地图图例切换
   * @param {*} siteType 所切换的站点类型
   * @return {*}
   */
  function siteShowTypeChange(siteType) {
    siteType.forEach((item) => {
      // 图例显示状态切换
      state.entitiesShowType[item] = !state.entitiesShowType[item];

      // 隐藏地图entities
      viewer.entities.values.forEach((ele) => {
        if (ele.siteType === item) {
          ele.show = state.entitiesShowType[item];
        }
      });
    });
  }

  // 时间格式化
  function filterTime(time) {
    return moment(time).format("YYYY-MM-DD HH");
  }

  /**
   * @description: 侧边栏显示切换
   * @return {*}
   */
  function asideShowTypeChange() {
    if (state.asideManage.planContrast.show) {
      ElMessage({
        message: "请先清除展示后再进行侧边栏切换",
        type: "warning",
      });
      return;
    }
    if (state.asideManage.showType === "forecast") {
      state.asideManage.forecastManage.show =
        !state.asideManage.forecastManage.show;
    } else {
      state.asideManage.resultManage.show =
        !state.asideManage.resultManage.show;
    }
  }

  // ————————————————地图站点弹窗部分业务代码————————————————
  /**
   * @description: 站点流量含沙量弹窗数据加载
   * @return {*}
   */
  function siteDialogEchartsInit() {
    state.siteProcessLineInfoData.tableData = [];

    switch (state.siteProcessLineInfoData.siteType) {
      case "ZQ": // 实时站点
        realSiteEchartsInit(
          state.siteProcessLineInfoData.id,
          "siteEcharts",
          ["流量", "含沙量", "预测含沙量"],
          [
            state.siteProcessLineInfoData.timeRange[0],
            state.siteProcessLineInfoData.timeRange[1],
          ]
        );
        break;
      case "RR": // 水库站
        reservoirEchartsInit(
          state.siteProcessLineInfoData.id,
          "siteEcharts",
          ["入库流量", "出库流量", "预测含沙量"],
          [
            state.siteProcessLineInfoData.timeRange[0],
            state.siteProcessLineInfoData.timeRange[1],
          ]
        );
        break;
      case "ZZ": // 实时站（包含预测含沙量）
        realSiteEchartsInit(
          state.siteProcessLineInfoData.id,
          "siteEcharts",
          ["流量", "含沙量", "预测含沙量"],
          [
            state.siteProcessLineInfoData.timeRange[0],
            state.siteProcessLineInfoData.timeRange[1],
          ]
        );
        break;
    }

    // 展示弹窗
  }

  /**
   * @description: 水库图表数据查询
   * @param {*} stcd 水库stcd
   * @param {*} elementId dom元素
   * @param {*} legendArr 图表图例数组
   * @param {*} timeRange 时间范围数组
   * @return {*}
   */
  function reservoirEchartsInit(
    stcd,
    elementId,
    legendArr,
    timeRange = [
      moment().subtract(7, "days").format("YYYY-MM-DD 00:00:00"),
      moment().add(3, "days").format("YYYY-MM-DD 00:00:00"),
    ]
  ) {
    getSchemeData({
      stcd,
      startDate: moment(timeRange[0]).format("YYYY-MM-DD 00:00:00"),
      endDate: moment(timeRange[1]).format("YYYY-MM-DD 23:59:59"),
      state: true,
    }).then((chartData: any) => {
      const elem = document.getElementById(elementId);

      elem.removeAttribute("_echarts_instance_");

      const myChart = echarts.init(elem);

      myChart.clear();

      let realData = [],
        ybData = [],
        flowData = [];

      chartData.list.forEach((item) => {
        if (item.real != null) realData.push([item.time, item.real]); // 出库流量

        if (item.yb != null) ybData.push([item.time, item.yb]); // 预测含沙量

        if (item.flow != null) flowData.push([item.time, item.flow]); // 入库流量
      });

      state.chartsTimeShow.forecastTimeShow = flowData[flowData.length - 1][0];

      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff",
        },
        grid: {
          top: 45,
          right: 10,
          bottom: 10,
          left: 10,
          containLabel: true,
        },
        legend: {
          data: legendArr,
          x: "center",
          top: "0",
          // icon: "circle",
          textStyle: {
            fontSize: 11,
          },
        },
        dataZoom: [
          {
            show: false,
          },
        ],
        xAxis: {
          type: "time",
          splitLine: { show: false },
          axisTick: {
            show: true,
            inside: true,
          },
        },
        yAxis: [
          {
            name: "流量(m³/s)",
            nameTextStyle: {
              fontSize: 11,
            },
            nameGap: "8",
            type: "value",
            splitLine: { show: false },
            scale: true,
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
              inside: true,
            },
            axisLabel: {
              formatter: function (value, index) {
                if (index % 2 != 0) return value;
                else return "";
              },
            },
            min: (value) => {
              return Math.round(value.min * 0.99);
            },
            max: (value) => {
              return Math.round(value.max * 1.01);
            },
          },
          {
            id: "y1",
            name: "含沙量(kg/m³)",
            nameTextStyle: {
              fontSize: 11,
            },
            type: "value",
            nameGap: "8",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              formatter: function (value, index) {
                if (index % 2 != 0) return value;
                else return "";
              },
            },
            axisTick: {
              show: true,
              inside: true,
            },
            scale: true,
            show: ybData.length === 0 ? false : true,
          },
        ],
        series: [
          {
            name: "入库流量",
            data: flowData,
            type: "line",
            symbol: "none",
            animation: false,
          },
          {
            name: "出库流量",
            data: realData,
            type: "line",
            symbol: "none",
            animation: false,
          },
          {
            name: "预测含沙量",
            yAxisIndex: 1,
            data: ybData,
            type: "line",
            symbol: "none",
            lineStyle: {
              type: "dashed",
            },
            itemStyle: {
              color: "#FFCC66",
            },
          },
        ],
      };

      myChart.setOption(option);

      // 表格数据赋值
      state.siteProcessLineInfoData.tableData = chartData.list;

      dialogTableColumnInit(legendArr);
    });
  }

  /**
   * @description: 实时站点图表数据查询
   * @param {*} stcd 实时站点stcd
   * @param {*} elementId dom元素
   * @param {*} legendArr 图表图例数组
   * @param {*} timeRange 时间范围数组
   * @return {*}
   */
  function realSiteEchartsInit(
    stcd,
    elementId,
    legendArr,
    timeRange = [
      moment().subtract(7, "days").format("YYYY-MM-DD 00:00:00"),
      moment().add(3, "days").format("YYYY-MM-DD 23:59:59"),
    ]
  ) {
    getRiverData({
      stcd: stcd,
      startDate: timeRange[0],
      endDate: timeRange[1].replace("00:00:00", "23:59:59"),
      state: true,
    }).then((chartData: any) => {
      const elem = document.getElementById(elementId);

      elem.removeAttribute("_echarts_instance_");

      const myChart = echarts.init(elem);

      myChart.clear();

      let flowData = [],
        realData = [],
        ybData = [];

      chartData.list.forEach((item) => {
        if (item.flow != null) flowData.push([item.time, item.flow]);

        if (item.real != null) realData.push([item.time, item.real]);

        if (item.yb != null) ybData.push([item.time, item.yb]);
      });

      state.chartsTimeShow.siteTimeShow = flowData[flowData.length - 1][0];

      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff",
        },
        grid: {
          top: 45,
          right: 10,
          bottom: 10,
          left: 15,
          containLabel: true,
        },
        legend: {
          data: legendArr,
          x: "center",
          top: "0",
          // icon: "circle"
          textStyle: {
            fontSize: 11,
          },
        },
        dataZoom: [
          {
            show: false,
          },
        ],
        xAxis: {
          type: "time",
          splitLine: { show: false },
          axisTick: {
            show: true,
            inside: true,
          },
        },
        yAxis: [
          {
            name: "流量(m³/s)",
            nameTextStyle: {
              fontSize: 11,
            },
            type: "value",
            nameGap: "8",
            splitLine: { show: false },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
              inside: true,
            },
            scale: true,
            axisLabel: {
              formatter: function (value, index) {
                if (index % 2 != 0) return value;
                else return "";
              },
            },
          },
          {
            name: "含沙量(kg/m³)",
            nameTextStyle: {
              fontSize: 11,
            },
            type: "value",
            nameGap: "8",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
              inside: true,
            },
            scale: true,
            axisLabel: {
              formatter: function (value, index) {
                if (index % 2 != 0) return value;
                else return "";
              },
            },
          },
        ],
        series: [
          {
            name: "含沙量",
            data: realData,
            yAxisIndex: 1,
            type: "line",
            itemStyle: {
              color: "#FFCC66",
            },
          },
          {
            name: "预测含沙量",
            data: ybData,
            yAxisIndex: 1,
            type: "line",
            symbol: "none",
            lineStyle: {
              type: "dashed",
            },
            itemStyle: {
              color: "#FFCC66",
            },
            animation: false,
          },
          {
            name: "流量",
            data: flowData,

            type: "line",
            symbol: "none",
            itemStyle: {
              color: "#87cefa",
            },
          },
        ],
      };

      myChart.setOption(option);

      // 表格数据赋值
      state.siteProcessLineInfoData.tableData = chartData.list;

      // 表格Column生成
      dialogTableColumnInit(legendArr);
    });
  }

  /**
   * @description: 根据不同站点类型生成Column
   * @param {Array} legendArr 数据类型
   * @return {*}
   */
  function dialogTableColumnInit(legendArr: Array<any>) {
    state.siteProcessLineInfoData.tableColumnData = [];

    legendArr.forEach((item: String, index: Number) => {
      let obj;
      if (item.includes("流量")) item += "(m³/s)";
      if (item.includes("含沙量")) item += "(kg/m³)";

      switch (index) {
        case 0:
          obj = {
            name: item,
            value: "flow",
          };
          break;
        case 1:
          obj = {
            name: item,
            value: "real",
          };
          break;
        case 2:
          obj = {
            name: item,
            value: "yb",
          };
          break;
      }

      state.siteProcessLineInfoData.tableColumnData.push(obj);
    });
  }
  // ————————————————地图站点弹窗部分业务代码————————————————

  // ————————————————成果查询部分业务代码————————————————
  /**
   * @description: 获取方案列表
   * @return {*}
   */
  function getPlanTable() {
    getPlanList({}).then((res: any) => {
      // 过滤出已经入库的方案
      state.resultParam.planTable = res.filter(
        (item) => item.state === "入库完成"
      );
      store.commit("GET_PLANLIST", state.resultParam.planTable);
    });
  }

  /**
   * @description: 查看方案冲淤量成果
   * @return {*}
   */
  async function resultSearch() {
    // 隐藏右下角图例色卡
    state.entitiesCard = false;
    // 清除地图上的图例
    // for (const key in state.entitiesShowType) {
    //   // 先将图例状态改成true，方便之后进行切换操作
    //   state.entitiesShowType[key] = true;

    //   // 图例显示状态切换
    //   state.entitiesShowType[key] = !state.entitiesShowType[key];

    //   // 隐藏地图entities
    //   viewer.entities.values.forEach((ele) => {
    //     if (ele.siteType === key) {
    //       ele.show = state.entitiesShowType[key];
    //     }
    //   });
    // }
    state.resultParam.startTime = "";
    state.resultParam.endTime = "";
    state.resultParam.startXscd = "";
    state.resultParam.endXscd = "";

    if (state.resultParam.selectPlan.length != 1) {
      ElMessage({
        message: "请选择一个方案",
        type: "warning",
      });
      return;
    }

    // 禁用方案选择下拉框
    state.resultParam.palnSelectDisabled = true;
    // 开始加载时禁用掉类型切换按钮
    state.resultParam.resultTypeDisabled = true;

    // 每次切换成果类型后停止定时器
    resultPlayTypeChange("pause");

    const selectPlan: any = state.resultParam.planTable.find(
      (item) => item.planno === state.resultParam.selectPlan[0]
    );

    if (selectPlan.planno === "0bc7737e-5357-43a9-b38d-083106406ce6") {
      state.resultParam.selectPlanData = selectPlan;
      state.resultParam.colorCard = ["longTimeForecast"];
      state.resultParam.showType = "resultParam";

      state.asideManage.showType = "result";
      state.asideManage.planType = "cj";
      state.asideManage.forecastManage.show = false;
      state.asideManage.resultManage.show = true;

      const cyzRequestData = await getPsDiaoDuList({
        plannos: "0bc7737e-5357-43a9-b38d-083106406ce6",
        dataType: "cyz",
      });

      const cyzChartOption = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "30年末",
            type: "pie",
            radius: ["40%", "70%"],
            data: cyzRequestData[0].data["30"].map((item) => {
              return {
                value: Math.abs(item.resultdata),
                name: item.cdstcd,
              };
            }),
          },
        ],
      };

      const cyzElem = document.getElementById("sublevel_cy_chart");
      cyzElem.removeAttribute("_echarts_instance_");
      let cyzChart = echarts.getInstanceByDom(cyzElem);
      if (cyzChart == undefined) {
        cyzChart = echarts.init(cyzElem);
      }
      cyzChart.clear();
      cyzChart.resize();
      cyzChart.setOption(cyzChartOption);

      const cyqavgRequestData = await getPsDiaoDuList({
        plannos: "0bc7737e-5357-43a9-b38d-083106406ce6",
        dataType: "cyqavg",
      });

      const cyqavgChartOption = {
        grid: {
          left: "0",
          right: "10",
          bottom: "10",
          top: "0",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "value",
          position: "top",
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
            inside: true,
          },
        },
        yAxis: {
          type: "category",
          data: Object.values(cyqavgRequestData[0].arr).reverse(),
          axisTick: {
            inside: true,
          },
        },
        series: [
          {
            name: "30年",
            type: "bar",
            data: Object.values(cyqavgRequestData[0].arr).map((item) => {
              return Math.abs(
                cyqavgRequestData[0].data["30"].find(
                  (ele) => ele.cdstcd === item
                ).resultdata
              );
            }),
          },
        ],
      };

      const cyqavgElem = document.getElementById("cy_strength_chart");
      cyqavgElem.removeAttribute("_echarts_instance_");
      let cyqavgChart = echarts.getInstanceByDom(cyqavgElem);
      if (cyqavgChart == undefined) {
        cyqavgChart = echarts.init(cyqavgElem);
      }
      cyqavgChart.clear();
      cyqavgChart.resize();
      cyqavgChart.setOption(cyqavgChartOption);
    } else {
      state.resultParam.showType = "resultParam";

      // 获取方案时间段
      getAloneLine({
        planno: state.resultParam.selectPlan[0],
        area: selectPlan.address,
        type: "s",
      }).then(async (res: any) => {
        let silderDisplayShow = new Array(5);

        silderDisplayShow[0] = 0;
        silderDisplayShow[4] = res.time.length - 1;

        // 取出时间数组长度
        const sliderNumber = res.time.length / 4;

        // 根据数组前一个值计算出当前排序
        for (let i = 1; i < 4; i++) {
          silderDisplayShow[i] = parseInt(
            silderDisplayShow[i - 1] + sliderNumber
          );
        }

        // 滑动条长度
        state.resultParam.silderIndex = [0];
        state.resultParam.silderLength = res.time.length - 1;
        state.resultParam.silderIndex.push(res.time.length - 1);

        // 滑动条范围
        state.resultParam.silderRange = [0];
        state.resultParam.silderRangeLength = res.time.length - 1;
        state.resultParam.silderRange.push(res.time.length - 1);

        // 处理silder数据
        res.time.forEach((item, i) => {
          state.resultParam.silderDataObj[i] = {
            style: {
              display: silderDisplayShow.includes(i) ? "" : "none",
              color: "#000",
              width: "72px",
              textAlign: "center",
            },
            label: item.substring(0, 10),
            value: item,
          };
          state.resultParam.silderRangeDataObj[i] = {
            style: {
              display: silderDisplayShow.includes(i) ? "" : "none",
              color: "#000",
              width: "72px",
              textAlign: "center",
            },
            label: item.substring(0, 10),
            value: item,
          };
        });

        // 处理地图geojson加载问题

        // 初始化地图加载
        state.resultParam.silderIndex[0] = 0;

        // 加载沙峰飞行
        if (
          state.resultParam.selectPlan.length === 1 &&
          selectPlan.address != "长江中下游"
        ) {
          await sandPeakPush(res.time);
        } else {
          state.resultParam.sandPushMainSiteTimeData = [];
        }

        // 请求成果中首次时间数据
        await getPlanResultGeoJson(
          state.resultParam.silderDataObj[0].value,
          true
        );

        // 循环递进时间后重新请求数据加载冲淤量图层
        await resultPlayTypeChange("play");

        // 解除成果类型选择框禁用状态
        state.resultParam.resultTypeDisabled = false;

        // 侧边栏切换
        state.asideManage.showType = "result";
        state.asideManage.planType = "sx";
        state.asideManage.forecastManage.show = false;
        state.asideManage.resultManage.show = true;
      });

      if (selectPlan.address != "长江中下游") {
        // 加载累积冲淤量
        showSedimentSum(state.resultParam.selectPlan[0]);

        // 显示冲淤量和累积过程
        state.asideManage.resultManage.manageArr.冲淤量.show = true;
        state.asideManage.resultManage.manageArr.冲淤量累积过程.show = true;
      } else {
        let myChart;
        const elem = document.getElementById("sedimentSumEcharts");
        myChart = echarts.init(elem);
        myChart.clear();

        // 隐藏冲淤量和累积过程
        state.asideManage.resultManage.manageArr.冲淤量.show = false;
        state.asideManage.resultManage.manageArr.冲淤量累积过程.show = false;
      }
    }
  }

  /**
   * @description: 获取冲淤量成果geojson
   * @param {*} time 获取时间
   * @param {*} initType 是否为第一次加载geojson(决定是否需要定位)
   * @return {*}
   */
  function getPlanResultGeoJson(time, initType) {
    store.commit("GET_PLANNO", state.resultParam.selectPlan[0]);
    searchPlanResultmap({
      planno: state.resultParam.selectPlan[0],
      area: state.resultParam.planTable.find(
        (item) => item.planno === state.resultParam.selectPlan[0]
      ).address,
      startdate: time,
      type: state.resultParam.selectPlanResultType,
      startXscd: state.resultParam.startXscd,
      endXscd: state.resultParam.endXscd,
    }).then((res: any) => {
      // 将获取到的geojson数据通过cesium处理
      Cesium.GeoJsonDataSource.load(res).then(async (dataSource) => {
        // 处理颜色部分
        var entities = dataSource.entities.values;
        for (var i = 0; i < entities.length; i++) {
          var entity: any = entities[i];
          // 将rgb值处理为hex数组
          var rgb = entity.properties.color.getValue();
          // cesium颜色最大为1 需要除以255进行处理
          entity.polygon.material = new Cesium.Color(
            parseInt(rgb[0]) / 255,
            parseInt(rgb[1]) / 255,
            parseInt(rgb[2]) / 255,
            0.7
          );
          // 边框线隐藏
          entity.polygon.outline = false;
        }

        cesiumLayer.planResultGeoJson.newLayer = dataSource;

        // 在地图上增加layer
        viewer.dataSources.add(dataSource).then((res) => {
          // 清除原有的图层
          setTimeout(() => {
            if (
              Object.keys(cesiumLayer.planResultGeoJson.oldLayer).length != 0
            ) {
              viewer.dataSources.remove(cesiumLayer.planResultGeoJson.oldLayer);
            }
            cesiumLayer.planResultGeoJson.oldLayer = dataSource;
          }, 200);
        });

        // 色卡赋值
        state.resultParam.colorCard = res.crs.sekuai;

        // 判断是否为初始化加载决定需不需要定位到geojson
        if (initType)
          viewer.flyTo(dataSource, {
            offset: {
              heading: Cesium.Math.toRadians(0), // 水平偏角，默认正北 0
              pitch: Cesium.Math.toRadians(-90), // 俯视角，默认-90，垂直向下
              roll: 0, // 旋转角
            },
          });
      });

      // 生成冲淤量图表
      geyPlanResultEchartsData(time);
    });
  }

  let ResultmapData = [];
  let myChartWater;
  /**
   * @description: 获取冲淤量图表
   * @param {*} time
   * @return {*}
   */
  function geyPlanResultEchartsData(time) {
    if (state.resultParam.selectPlanResultType === "cy") {
      // 沙峰推进清除
      viewer.entities.removeById("historyLine");
      viewer.entities.removeById("historyPoint");
    }
    const selectPlanData = state.resultParam.planTable.find(
      (item) => item.planno === state.resultParam.selectPlan[0]
    );

    searchPlanResultmapData({
      planno: state.resultParam.selectPlan[0],
      area: selectPlanData.address,
      startdate: time,
      type: state.resultParam.selectPlanResultType,
      startXscd: state.resultParam.startXscd,
      endXscd: state.resultParam.endXscd,
    }).then((res: Array<any>) => {
      res.reverse();
      if (state.resultParam.sliderDuanIndex.length === 0) {
        let silderDisplayShow = new Array(10);

        silderDisplayShow[0] = 0;
        silderDisplayShow[9] = res.length - 1;

        // 取出时间数组长度
        const sliderNumber = res.length / 9;

        // 根据数组前一个值计算出当前排序
        for (let i = 1; i < 9; i++) {
          silderDisplayShow[i] = parseInt(
            silderDisplayShow[i - 1] + sliderNumber
          );
        }

        // 滑动条最大值最小值
        state.resultParam.sliderDuanMax = res.length - 1;
        state.resultParam.sliderDuanMin = 0;
        // 滑动条范围数据
        state.resultParam.sliderDuanIndex = [0, res.length - 1];
        state.resultParam.sliderDuanArr = [0, res.length - 1];

        // 处理silder数据
        res.forEach((item, i) => {
          state.resultParam.sliderDuanData[i] = {
            style: {
              display: silderDisplayShow.includes(i) ? "" : "none",
              color: "#000",
              width: "72px",
              textAlign: "center",
            },
            label: item.xsnm,
            value: item.xsnm,
          };
        });
      }

      ResultmapData = JSON.parse(JSON.stringify(res));
      const elem = document.getElementById("plan-result-echarts");

      elem.removeAttribute("_echarts_instance_");

      let myChart = echarts.getInstanceByDom(elem);

      if (myChart == undefined) {
        myChart = echarts.init(elem);
      }

      myChart.clear();

      const option: any = {
        title: {
          text: time,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter: (val) => `
              距坝里程：${val[0].data.name}(km)
              <br />
              断面名称：${val[0].data.xsnm}
              <br />
              ${
                state.resultParam.selectPlanResultType === "cy"
                  ? `冲淤量：${val[0].data.value}(万m³)`
                  : `含沙量：${val[0].data.value}(kg/m³)`
              }
              <br />
              推算沙峰抵达时间：${val[0].data.sandPushTime || "暂无"}
            `,
        },
        grid: {
          top: 45,
          right: 100,
          bottom: 0,
          left: 25,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            name: "距坝里程(km)",
            boundaryGap: false,
            data: res.map((item) => Number(item.rimods) / 1000),
            splitLine: { show: true },
            axisTick: {
              show: true,
              inside: true,
            },
            axisLine: {
              onZero: false,
            },
            axisLabel: {
              formatter: (value) => Number(value).toFixed(0),
            },
            triggerEvent: true,
          },
          // {
          //   type: "category",
          //   data: res.map(({ stName }) => stName || ""),
          //   axisLine: {
          //     show: false,
          //     onZero: true
          //   },
          //   splitLine: {
          //     show: false,
          //   },
          //   axisTick: {
          //     show: false,
          //     inside: true
          //   },
          //   axisLabel: {
          //     interval: 0,
          //     margin: -10,
          //     verticalAlign: 'top',
          //     formatter: function (value) {
          //       let str = ``;
          //       value.split("").forEach((item) => {
          //         str += `${item}\n\n`;
          //       });
          //       return str;
          //     },
          //   }
          // }
        ],
        yAxis: {
          type: "value",
          name: `${
            state.resultParam.selectPlanResultType === "cy"
              ? "冲淤量(万m³)"
              : "含沙量(kg/m³)"
          }`,
          scale: true,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
            inside: true,
          },
        },
        series: [
          {
            type:
              state.resultParam.selectPlanResultType === "cy" ? "bar" : "line",
            data: res.map((item) => {
              let obj: any = {
                name: Number(item.rimods) / 1000,
                value: item.resultdata,
                xsnm: item.xsnm,
              };
              if (selectPlanData.address != "长江中下游") {
                obj.sandPushTime = state.resultParam.sandPushTooltipData.find(
                  (ele) => ele.xsnm === item.xsnm
                ).sdf;
              }
              //
              return obj;
            }),
            showSymbol: true,
            barCategoryGap:
              state.resultParam.selectPlanResultType === "cy" ? 0 : "20%",
            smooth: true,
          },
        ],
      };

      myChart.resize();
      myChart.setOption(option);

      if (state.resultParam.selectPlanResultType === "cy") {
        option.series.push({
          type: "line",
          data: res.map((item) => {
            return {
              name: Number(item.rimods) / 1000,
              value: item.resultdata,
              xsnm: item.xsnm,
            };
          }),
          showSymbol: false,
          lineStyle: {
            show: true,
            color: "#5470c6",
          },
        });
      }
      // echarts图表点击事件
      myChart.getZr().on("click", function (params) {
        var pointInPixel = [params.offsetX, params.offsetY];
        if (myChart.containPixel("grid", pointInPixel)) {
          var xIndex = myChart.convertFromPixel(
            { seriesIndex: 0 },
            pointInPixel
          )[0];
          dmSearch({
            keyword: ResultmapData[xIndex].xsnm,
          }).then((res: any) => {
            const pointArr = res.data.args.split(",");

            clearEntity();
            getSiteCoordinate();
            const flashPoint = drawPoint(
              Number(pointArr[0]),
              Number(pointArr[1])
            );

            viewer
              .flyTo(flashPoint, {
                offset: {
                  heading: Cesium.Math.toRadians(0), // 以弧度为单位的航向角,水平偏角，默认正北 0
                  pitch: Cesium.Math.toRadians(-90), // 以弧度为单位的俯仰角，默认-90，垂直向下
                  range: 10000, // 到中心的距离，以米为单位。
                },
              })
              .then((res) => {
                state.sectionDialog.show = true;
                state.sectionDialog.sixDataArr = [];
                state.sectionDialog.name = ResultmapData[xIndex].xsnm;

                /**
                 * @description: 获取断面数据
                 * @return {*}
                 */
                getXscdSedAccumulate({
                  startTime: state.resultParam.startTime,
                  endTime: state.resultParam.endTime,
                  planno: selectPlanData.planno,
                  xscd: state.sectionDialog.name,
                  type: state.resultParam.selectPlanResultType,
                }).then((res: any) => {
                  const elem = document.getElementById("section-charts");

                  myChartWater = echarts.init(elem);

                  myChartWater.clear();

                  let option = {
                    tooltip: {
                      trigger: "axis",
                      backgroundColor: "#fff",
                      formatter: (value) => {
                        return `
                        日期：${moment(value[0].value[0]).format(
                          "YYYY-MM-DD HH:mm:ss"
                        )}
                        <br />
                        ${
                          state.resultParam.selectPlanResultType === "cy"
                            ? "冲淤量(万m³)"
                            : "含沙量(kg/m³)"
                        }: ${value[0].value[1]}
                        `;
                      },
                    },
                    grid: {
                      top: 45,
                      bottom: 10,
                      left: 45,
                      containLabel: true,
                    },
                    xAxis: {
                      name: "日期",
                      type: "category",
                      splitLine: { show: true },
                      axisTick: {
                        show: true,
                      },
                      axisLine: {
                        onZero: false,
                        lineStyle: {
                          color: "black",
                          width: 2,
                        },
                      },
                      axisLabel: {
                        formatter: (value) => {
                          return moment(value).format("YY-MM-DD HH");
                        },
                      },
                      // min: "dataMin",
                      // max: "dataMax",
                    },
                    yAxis: {
                      name:
                        state.resultParam.selectPlanResultType === "cy"
                          ? "冲淤量(万m³)"
                          : "含沙量(kg/m³)",
                      type: "value",
                      nameGap: "8",
                      scale: true,
                      boundaryGap: true,
                      splitLine: { show: true },
                      axisTick: {
                        show: true,
                      },
                      axisLine: {
                        show: true,
                        lineStyle: {
                          color: "black",
                          width: 2,
                        },
                        onZero: false,
                      },
                    },
                    series: [
                      {
                        data: res.map((item) => {
                          return [item.resulttime, item.resultdata];
                        }),
                        type:
                          state.resultParam.selectPlanResultType === "cy"
                            ? "bar"
                            : "line",
                        itemStyle: {
                          color: "#5470c6",
                        },
                        symbol: "none",
                      },
                    ],
                  };

                  myChartWater.setOption(option);

                  setTimeout(() => {
                    myChartWater.resize();
                  }, 100);
                });
              });

            setInterval(() => {
              flashPoint.show = !flashPoint.show;
            }, 1000);
          });
        }
      });

      option && myChart.setOption(option);
    });
  }

  /**
   * @description: 弹出框echarts参数配置
   * @return {}
   */
  function echartsOption(res) {
    let option;
    return (option = {
      tooltip: {
        trigger: "axis",
        backgroundColor: "#fff",
        formatter: (params) => {
          return `
              <div>起点距：${params[0].data[0]}m</div>
              <div>高程：${params[0].data[1]}m</div>
              <div>水位：${params[1].data[1]}m</div>
            `;
        },
      },
      grid: {
        top: 45,
        right: 70,
        bottom: 10,
        left: 15,
        containLabel: true,
      },
      xAxis: {
        name: "起点距(m)",
        type: "category",
        splitLine: { show: false },
        axisTick: {
          show: false,
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: "black",
            width: 2,
          },
        },
        min: "dataMin",
        max: "dataMax",
      },
      yAxis: {
        name: "高程(m)",
        type: "value",
        nameGap: "8",
        scale: true,
        boundaryGap: true,
        splitLine: { show: false },
        axisLine: {
          show: true,
          lineStyle: {
            color: "black",
            width: 2,
          },
          onZero: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          z: 2,
          data: res.data
            .sort((a, b) => a.inptds - b.inptds)
            .map((item) => {
              return [item.inptds, item.ribbel];
            }),
          type: "line",
          itemStyle: {
            color: "#8b4513",
          },
          symbol: "none",
          areaStyle: {
            normal: {
              color: "rgb(150,120,80)",
              origin: "start",
              opacity: 1,
            },
          },
        },
        {
          z: 1,
          data: res.wt.map((item) => {
            return [item[0], item[1]];
          }),
          type: "line",
          itemStyle: {
            color: "#0184d5",
          },
          symbol: "none",
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(1, 132, 213, 0.1)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            origin: "start",
          },
        },
      ],
    });
  }

  /**
   * @description: 清除成果展示
   * @return {*}
   */
  function clearResult() {
    // 展示右下角图例色卡
    state.entitiesCard = true;

    // 清除断面范围及时间范围
    state.resultParam.startXscd = "";
    state.resultParam.endXscd = "";
    state.resultParam.startTime = "";
    state.resultParam.endTime = "";

    // 暂停播放
    resultPlayTypeChange("pause");

    // 清除dataSources
    for (const key in cesiumLayer.planResultGeoJson) {
      viewer.dataSources.remove(cesiumLayer.planResultGeoJson[key]);
    }

    // 沙峰推进清除
    viewer.entities.removeById("historyLine");
    viewer.entities.removeById("historyPoint");

    // 色卡清除
    state.resultParam.colorCard = [];

    // 多方案对比清除
    state.asideManage.planContrast.show = false;
    multipleSelection.value = [];

    // 清除方案选择禁用
    state.resultParam.palnSelectDisabled = false;

    // 侧边栏切换
    state.asideManage.showType = "forecast";
    state.asideManage.forecastManage.show = true;
    state.asideManage.resultManage.show = false;

    // 清除所有实体
    clearEntity();

    // 加载站点
    getSiteCoordinate();

    state.resultParam.sliderDuanIndex = [];

    // 重置echarts表格类型
    state.resultParam.selectPlanResultType = "s";
  }

  /**
   * @description: 成果展示滑动条鼠标浮窗格式化
   * @param {*} value 当前滑动条index
   * @return {*}
   */
  function sliderFormat(value) {
    return state.resultParam.silderDataObj[value].value;
  }

  /**
   * @description: 成果展示断面滑动条鼠标浮窗格式化
   * @param {*} value 当前滑动条index
   * @return {*}
   */
  function sliderDuanFormat(value) {
    if (state.resultParam.sliderDuanData[value]) {
      return state.resultParam.sliderDuanData[value].value;
    }
  }

  /**
   * @description: 水位滑动条拖拽事件
   * @param {*} value 当前滑动条index
   * @return {*}
   */
  function handleChange(value) {
    state.waterSlider.waterInfo.wt.forEach((item) => {
      item[1] = value;
    });
    let option = echartsOption(state.waterSlider.waterInfo);
    myChartWater.setOption(option);
    /**
     * @description: 获取六要素
     * @return {*}
     */
    getSectionSix({
      xsnm: state.sectionDialog.name,
      wt: state.waterSlider.watervalue,
    }).then((res: any) => {
      res.msno = "默认";

      state.sectionDialog.sixDataArr = [];
      state.sectionDialog.sixDataArr.push(res);
    });
  }

  /**
   * @description: 成果展示滑动条拖拽事件
   * @param {*} value 当前滑动条index
   * @return {*}
   */
  function sliderChange(value) {
    getPlanResultGeoJson(
      state.resultParam.silderDataObj[value[0]].value,
      false
    );
  }

  /**
   * @description: 播放状态控制
   * @param {*} type 播放/暂停
   * @return {*}
   */
  function resultPlayTypeChange(type) {
    switch (type) {
      case "pause":
        viewer.clock.shouldAnimate = false; // 暂停播放沙峰轨迹

        // 清除定时器
        clearInterval(state.resultParam.interval);

        // 字段置空
        state.resultParam.interval = null;
        break;
      case "play":
        if (state.resultParam.linkageStatus) {
          state.resultParam.linkageStatus = false;
          state.resultParam.silderIndex = [].concat(
            state.resultParam.silderRange
          );
        }
        showSedimentSum(
          state.resultParam.selectPlan[0],
          state.resultParam.startTime,
          state.resultParam.endTime
        );
        if (state.resultParam.playType === "pause") {
          viewer.clock.shouldAnimate = true; // 开始播放沙峰轨迹

          // 启用定时器
          state.resultParam.interval = setInterval(() => {
            // 判断当前index是否大于时间数组长度
            if (
              state.resultParam.silderIndex[0] <
              state.resultParam.silderIndex[1]
            ) {
              // 播放index自增
              state.resultParam.silderIndex[0]++;

              // 自增后请求数据
              getPlanResultGeoJson(
                state.resultParam.silderDataObj[
                  state.resultParam.silderIndex[0]
                ].value,
                false
              );
            }
          }, 5000);
        }
        break;
    }

    // 播放状态修改
    state.resultParam.playType = type;
  }
  // ————————————————成果查询部分业务代码————————————————

  // ————————————————方案对比部分业务代码————————————————
  /**
   * @description: 展示多方案成果对比
   * @return {*}
   */
  function showPlanContrast() {
    // 判断选择方案个数
    if (state.resultParam.selectPlan.length < 2) {
      ElMessage({
        message: "请至少选择两个方案进行对比",
        type: "warning",
      });
      return;
    }
    store.commit("GET_PLANNOMORE", state.resultParam.selectPlan);

    // 多方案加载累积冲淤量
    showSedimentSum(state.resultParam.selectPlan.join(","));

    // 禁用方案选择
    state.resultParam.palnSelectDisabled = true;

    // 方案对比dom元素展示
    state.asideManage.planContrast.show = true;

    // 根据已选择的方案进行赋值
    multipleSelection.value = state.resultParam.selectPlan.map(
      (item) => state.resultParam.planTable.filter((i) => i.planno == item)[0]
    );

    // 隐藏预测/单方案成果card
    state.asideManage.showType = "result";
    state.asideManage.planType = "sx";
    state.asideManage.forecastManage.show = false;
    state.asideManage.resultManage.show = true;

    const selectPlan: any = state.resultParam.planTable.find(
      (item) => item.planno === state.resultParam.selectPlan[0]
    );

    if (selectPlan.address != "长江中下游") {
      // 显示冲淤量和累积过程
      state.asideManage.resultManage.manageArr.冲淤量.show = true;
      state.asideManage.resultManage.manageArr.冲淤量累积过程.show = true;
    } else {
      // 隐藏冲淤量和累积过程
      state.asideManage.resultManage.manageArr.冲淤量.show = false;
      state.asideManage.resultManage.manageArr.冲淤量累积过程.show = false;
    }
  }

  /**
   * @description: 加载累计冲淤量图表
   * @param {*} plannos 所选方案
   * @param {*} startTime 所选方案开始时间
   * @param {*} endTime 所选方案结束时间
   * @return {*}
   */
  let color = ["#5470c6", "#91cc75", "#fac858", "#ee6666"]; // 方案颜色数组
  async function showSedimentSum(plannos, startTime = "", endTime = "") {
    const params = {
      startTime,
      endTime,
      plannos,
      startXscd: state.resultParam.startXscd ? state.resultParam.startXscd : "",
      endXscd: state.resultParam.endXscd ? state.resultParam.endXscd : "",
    };
    const res: any = await getSedAccumulate(params);
    state.sedimentSum.tableData = [];
    let series = [];
    let data = [];
    let right = 10;
    if (state.resultParam.selectPlan.length >= 2) {
      res.forEach((item) => {
        state.sedimentSum.tableData.push(item.data);
        series.push({
          data: item.arr.map((item) => {
            return [item.dt, item.cyl];
          }),
          type: "line",
          name: item.data.name,
        });
        data.push(item.data.name);
        let colorItem = getRandomColor(color);
        color.push(colorItem);
      });
      right = 10;
    } else {
      state.sedimentSum.tableData.push(res[0].data);
      series.push({
        data: res[0].arr.map((item) => {
          return [item.dt, item.cyl];
        }),
        type: "line",
        name: res[0].data.name,
      });
      data.push(res[0].data.name);
      right = 30;
      let colorItem = getRandomColor(color);
      color.push(colorItem);
    }

    let myChart;
    const elem = document.getElementById("sedimentSumEcharts");
    myChart = echarts.init(elem);
    myChart.clear();
    let option = {
      color,
      tooltip: {
        trigger: "axis",
        backgroundColor: "#fff",
        confine: true,
        textStyle: {
          fontSize: "12",
        },
      },
      legend: {
        type: "scroll",
        right,
        data,
      },
      grid: {
        top: 45,
        right: 55,
        bottom: 0,
        left: 0,
        containLabel: true,
      },
      xAxis: {
        name: "日期",
        type: "time",
        splitLine: {
          show: true, //让网格显示
        },
        axisTick: {
          show: true,
          inside: true,
        },
        axisLabel: {
          // formatter: (value) => {
          //   return moment(value).format("YY-MM-DD");
          // },
        },
        nameTextStyle: {
          padding: [50, 0, 0, 0],
          verticalAlign: "top",
        },
      },
      yAxis: {
        name: "单位: 万m³",
        type: "value",
        nameGap: "8",
        scale: true,
        boundaryGap: true,
        splitLine: { show: true },
        axisLine: {
          show: true,
          lineStyle: {
            color: "black",
            width: 2,
          },
          onZero: false,
        },
        axisTick: {
          show: true,
          inside: true,
        },
      },
      series,
    };
    myChart.setOption(option);

    setTimeout(() => {
      myChart.resize();
    }, 100);
  }

  /**
   * @description: 随机生成深色
   * @param {*} exist_color //exist_color为已存在的颜色数组
   * @return {*}
   */
  //exist_color为已存在的颜色数组
  function getRandomColor(exist_color) {
    // 如果有指定的背景的颜色，那也要先加入也不能重复，只要假如一次就够了
    //exist_color.push("#4169E1");
    //以下的*192都是为了是获取到的颜色为深色的
    let r = Math.floor(Math.random() * 192);
    let g = Math.floor(Math.random() * 192);
    let b = Math.floor(Math.random() * 192);
    let r16 =
      r.toString(16).length === 1 && r.toString(16) <= "f"
        ? 0 + r.toString(16)
        : r.toString(16);
    let g16 =
      g.toString(16).length === 1 && g.toString(16) <= "f"
        ? 0 + g.toString(16)
        : g.toString(16);
    let b16 =
      b.toString(16).length === 1 && b.toString(16) <= "f"
        ? 0 + b.toString(16)
        : b.toString(16);
    let color = "#" + r16 + g16 + b16;
    // 获取到未重复的颜色，返回该颜色
    if (exist_color.indexOf(color) === -1) {
      return color;
    }
    // 获取到的颜色重复，重新生成
    else {
      getRandomColor(exist_color);
    }
  }

  /**
   * @description: 修改表格单元行背景色
   * @return {*}
   */
  function rowBgColor({ row, rowIndex }) {
    let styleRes = {
      background: `${color[rowIndex]}`,
      color: "#fff",
    };
    return styleRes;
  }

  /**
   * @description: 折叠面板展开事件
   * @return {*}
   */
  function collapseChange() {}

  /**
   * @description: 范围选取点击事件
   * @return {*}
   */
  function rangeSelection() {
    state.resultParam.playType = "pause";
    resultPlayTypeChange("pause");
    state.resultParam.linkageStatus = true;
  }

  /**
   * @description: 断面范围选取
   * @return {*}
   */
  function sliderDuanChange(value) {
    state.resultParam.startXscd =
      state.resultParam.sliderDuanData[value[0]].value;
    state.resultParam.endXscd =
      state.resultParam.sliderDuanData[value[1]].value;
    // 加载累积冲淤量
    if (
      value[0] === state.resultParam.sliderDuanArr[0] &&
      value[1] === state.resultParam.sliderDuanArr[1]
    ) {
      state.resultParam.startXscd = "";
      state.resultParam.endXscd = "";
    }
    showSedimentSum(
      state.resultParam.selectPlan[0],
      state.resultParam.startTime,
      state.resultParam.endTime
    );
  }

  /**
   * @description: 范围拖动事件
   * @return {*}
   */
  function sliderRangeChange(value) {
    if (state.resultParam.linkageStatus) {
      state.resultParam.startTime =
        state.resultParam.silderRangeDataObj[value[0]].value;
      state.resultParam.endTime =
        state.resultParam.silderRangeDataObj[value[1]].value;
    }
  }

  function dataReload() {
    getPlanTable();
    leftEchartsInit();
  }

  return {
    ...toRefs(state),

    baseMapManage,

    siteDialogEchartsInit,

    filterTime,

    siteShowTypeChange,

    resultSearch,

    clearResult,

    sliderFormat,

    sliderChange,

    resultPlayTypeChange,

    asideShowTypeChange,

    showPlanContrast,

    handleChange,

    showSedimentSum,

    rowBgColor,

    collapseChange,

    sliderDuanChange,

    rangeSelection,

    sliderDuanFormat,

    sliderRangeChange,

    dataReload,

    changeBaseMap,
  };
}
